<template>
	<view>
		<tn-navbar fixed :bordered="false" bg-color="linear-gradient(180deg, #d8e5ff, #d8e5ff, #ffffff);">优惠管理</tn-navbar>
		<view class="tn-white_bg">
			<z-paging ref="paging" v-model="dataList" @query="queryList">
				<template #top>
					<tn-input v-model="inputValue" placeholder="请输入商户名称">
						<template #suffix>
							<view class="tn-ml tn-mr" @click="filterData"><tn-icon name="search" color="tn-gray_bg"></tn-icon></view>
						</template>
					</tn-input>
				</template>
				<view class="tn-m">
					<view v-for="offer in dataList" :key="offer.id" class="offer-item tn-shadow tn-p-sm">
						<view class="offer-header tn-flex tn-flex-row justify-between">
							<view class="tn-flex tn-blue_text">
								<tn-icon name="mammoth" style="font-size: 56rpx;"></tn-icon>
								<text class="tn-text-lg tn-text-bold">{{ offer.name }}</text>
							</view>
							<view class="tn-flex">
								<tn-button bg-color="tn-aquablue" shadow @click="copyCode(offer.code)"><text class="tn-text-bold">使用优惠码</text></tn-button>
							</view>
						</view>
						<view class="offer-content tn-p-sm">
							<text class="offer-description">{{ offer.description }}</text>
							<view class="offer-details tn-flex tn-flex-row justify-between">
								<text>类型: {{ offer.type }}</text>
								<text>有效期至: {{ offer.validUntil }}</text>
							</view>
						</view>
					</view>
				</view>
				<template #loadingMoreNoMore>
					<view class="loading-more">没有更多优惠了</view>
				</template>
			</z-paging>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputValue = ref('');
const dataList = ref([]);

// 模拟数据查询
const queryList = (pageNo, pageSize) => {
	const allOffers = [
		{
			id: 1,
			name: '城市中心停车场',
			logo: 'https://picsum.photos/seed/city/200',
			description: '工作日停车满4小时免费延长1小时',
			validUntil: '2023-07-31',
			code: 'CITY4PLUS1',
			type: '室内停车场'
		},
		{
			id: 2,
			name: '绿地公园停车场',
			logo: 'https://picsum.photos/seed/park/200',
			description: '周末全天停车八折优惠',
			validUntil: '2023-08-15',
			code: 'PARK20OFF',
			type: '露天停车场'
		},
		{
			id: 3,
			name: '商业广场地下停车场',
			logo: 'https://picsum.photos/seed/mall/200',
			description: '夜间停车（20:00-次日8:00）半价',
			validUntil: '2023-09-30',
			code: 'NIGHT50',
			type: '地下停车场'
		}
	];

	// 分页逻辑
	const start = (pageNo - 1) * pageSize;
	const end = start + pageSize;
	dataList.value = allOffers.slice(start, end);
};

const copyCode = code => {
	uni.setClipboardData({
		data: code,
		success: () => {
			uni.showToast({
				title: `优惠码 ${code} 已复制到剪贴板！`,
				icon: 'none'
			});
		}
	});
};
</script>

<style scoped>
.offer-item {
	background-color: white;
	border-radius: 12px;
	margin-bottom: 20px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
}

.offer-header {
	background-color: #bbdefb;
	color: #1565c0;
	padding: 15px;
	font-size: 18px;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.offer-content {
	padding: 15px;
	display: flex;
	flex-direction: column;
}

.offer-description {
	margin-bottom: 10px;
	line-height: 1.4;
}

.offer-details {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	color: #757575;
	margin-bottom: 10px;
}

.loading-more {
	text-align: center;
	padding: 20px;
	color: #757575;
}
</style>
